<ui:composition
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:q="http://huliqing.name/qfaces"
    xmlns:g="http://huliqing.name/qblog"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    template="/WEB-INF/template/layout_photo.xhtml"
    xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:define name="subTabName">
        <c:set var="subTabName" value="folderList" />
    </ui:define>

    <ui:define name="menuTitle">
        <h:graphicImage url="/_res/image/star.png" height="40" styleClass="alignM"/>
        添加相册
    </ui:define>

    <ui:define name="menuContent">
        <style type="text/css">
            .col1{width:80px;text-align:right;}
            .col2{width:300px;}
        </style>
        <h:form id="myform">
            <h:panelGrid columns="3" border="0"
                         width="100%"
                         columnClasses="col1,col2,,"
                         rowClasses="row2,row1"
                         cellpadding="3"
                         cellspacing="3"
                         styleClass="">
                <h:outputLabel for="name" value="文件夹名称*" />
                <h:inputText id="name" value="#{folderEditWe.folder.name}" />
                <q:validator for="name" required="true" messageError="这里不能不填" displayFlag="false"/>

                <h:outputLabel for="security" value="隐私*" />
                <h:panelGroup >
                    <h:selectOneRadio id="security" value="#{folderEditWe.folder.security}"
                                      onchange="document.getElementById('myform:fetchCodePanel').style.display = (this.value == 'PROTECTED' ? '' : 'none')">
                        <f:converter converterId="converter.SecurityConverter" />
                        <f:selectItems value="#{folderEditWe.securitys}" />
                    </h:selectOneRadio>
                    <h:panelGroup id="fetchCodePanel" layout="block" style="display: none;">
                        <h:outputLabel value="提取码" />
                        <h:inputText id="fetchCode" value="#{folderEditWe.folder.fetchCode}" />
                    </h:panelGroup>
                    <script type="text/javascript">
                        var security = "#{folderEditWe.folder.security}";
                        if (security == "PROTECTED") {
                            document.getElementById('myform:fetchCodePanel').style.display = "";
                        }
                    </script>
                </h:panelGroup>
                <q:validator for="security" displayFlag="false" required="true" message="PUBLIC:公开的; PROTECTED:受保护的，可设提取码; PRIVATE:完全隐私的" messageError="请选择类型"/>

                <h:outputLabel for="cover" value="封面图" />
                <h:inputText id="cover" value="#{folderEditWe.folder.cover}" size="40" />
                <h:outputText styleClass="gray" value="封面图片，这是一个URL地址，如:http://xxx.com/aaa.gif,
                              指定的图片将作为该相册的封面。如果不填，则使用相册内的第一张图片作为封面。" />

                <h:panelGroup />
                <h:panelGroup layout="block" style="margin-top: 30px;">
                    <ui:insert name="actions">
                        <h:commandButton value="添加文件夹" action="#{folderEditWe.add}" styleClass="button"/>
                    </ui:insert>
                </h:panelGroup>
                <h:panelGroup />
            </h:panelGrid>
        </h:form>
    </ui:define>
</ui:composition>